﻿(function ($) {
    var placeholder_color = '#999999';

    $.fn.placeholder = function (color) {
        if ('placeholder' in document.createElement('input'))
            return;
        
        if (color)
            placeholder_color = color;
        else
            color = placeholder_color;

        $(this).each(function (i) {
            var placeholder = $(this).attr('placeholder');

            if ($(this).attr('type') == 'password') {
                var $field = $(this)
					.focusout(function (e) {
					    if ($field.val() == '')
					        $([$field[0], $dummy[0]]).toggle();
					})
					.toggle(),

				$dummy = $('<input/>', { type: 'text' })
					.focus(function (e) {
					    $([$dummy[0], $field[0]]).toggle();
					    $field.focus();
					});

                $dummy.attr('class', $field.attr('class'));
                $dummy.attr('style', $field.attr('style'));

                $dummy
					.val(placeholder)
					.css('color', color)
					.toggle()
					.insertAfter($field);
            }
            else {
                var orig = $(this).css('color');

                if ($(this).val() == '' || $(this).val() == placeholder)
                    $(this)
						.val(placeholder)
						.css('color', color);

                $(this)
					.focus(function (e) {
					    if ($(this).val() == placeholder) {
					        $(this).val('');
					        $(this).css('color', orig);
					    }
					})
					.focusout(function (e) {
					    if ($(this).val() == '') {
					        $(this).val(placeholder);
					        $(this).css('color', color);
					    }
					});
            }
            $(this).removeAttr('placeholder');
        });
    }

})(jQuery);